<template>
<div class="case-state">
  <div class="button-wrap">
    <el-button size="mini" type="info">案件档案</el-button>
    <el-button  size="mini"  type="primary"><router-link to="/detective-group">侦查组织</router-link></el-button>
    <el-button size="mini" type="success">任务进展</el-button>
    <el-button size="mini" type="info">工作纪要</el-button>
    <el-button size="mini" type="success">情况汇总</el-button>
    <el-button size="mini" type="info">侦查总结</el-button>
  </div>
  <div class="state">
    <div class="state-head">
      <div class="name">
        <h3>广州十三行许静雇凶杀人案<span>(杀人案)</span></h3>
        <span class="num">录比反: 56, 可侦度: 100</span>
      </div>
      <div class="tags">
        <span class="tag">盗窃案</span>
        <span class="tag">入室盗窃案</span>
        <span class="tag">结案</span>
        <span class="tag">涉抢</span>    
      </div>
    </div>
    <div class="state-body">
      <div class="item">
        <span class="label">案件编号：</span><span class="value">AAA</span>
      </div> 
      <div class="item">
        <span class="label">案件名称：</span><span class="value">BBB</span>
      </div>
      <div class="item">
        <span class="label">发案地点：</span><span class="value">胜多负少的</span>
      </div> 
      <div class="item">
        <span class="label">作案手段：</span><span class="value">色粉色</span>
      </div> 
      <div class="item">
          <span class="label">作案特点：</span><span class="value">分为非</span>
      </div> 
      <div class="item">
        <span class="label">案件名称：</span><span class="value">色粉色</span>
      </div>  
    </div>
  </div>
  <div class="steps">
    <div class="node">
      <div class="top">
        <div class="step">1</div>
        <div class="name">接警</div>
      </div>
      <div class="date">2018.10.09</div>
    </div>
    <div class="devide"></div>
    <div class="node">
      <div class="top">
        <div class="step">2</div>
        <div class="name">立案</div>
      </div>
      <div class="date">2018.10.09</div>
     </div>
    <div class="devide"></div>
    <div class="node">
      <div class="top">
        <div class="step">3</div>
        <div class="name">侦查终结</div>
      </div>
      <div class="date">2018.10.09</div>
    </div>
    <div class="devide"></div>
    <div class="node">
      <div class="top">
        <div class="step">4</div>
        <div class="name">移送起诉</div>
      </div>
      <div class="date">2018.10.09</div>
    </div>
  </div>
</div>
</template>

<style lang="scss" scoped>
@import "../../../../src/style/variables/_default.scss";
// @import "../../../../src/style/_mixin.scss";
.case-state{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  border-radius: 10px;
  background: white;
  .button-wrap{
    flex: 0 0 auto;
    display: flex;
    padding: 10px 5px 5px 5px;
    justify-content: space-around;
  }
  .state{
    flex: 0 0 auto;
    padding: 5px 20px;
    &-head{
      margin: 5px 0;
      .name{
        display: flex;
        margin-bottom: 5px;
        h3{
          flex:1;
          padding: 0;
          margin: 0;
          span{
            font-weight: normal;
            font-size: 12px;
            color: $--color-primary;
          }
        }
        .num{
          flex: 1;
          text-align: right;
        }
      }
      .tags{
        .tag{
          display: inline-block;
          font-size: 12px; 
          line-height: 1.2;
          margin: 0 5px 3px 0;
          padding: 0 3px;
          border: 1px solid blue;
          border-radius: 5px;
        }
      }
    }
    &-body{
      display: flex;
      flex-flow: row wrap;
      .item{
        flex: 0 0 49%;
        line-height:2;
        .label{
          font-weight:bold;
          margin-right:5px;
        }
      }
    }
  }
  .steps{
    flex: 0 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    .node{
      flex: 0 0 auto;
      .top{
        display: flex;
        align-items: center;
        .step{
          flex: 0 0 26px;
          width: 26px;
          line-height: 26px;
          border-radius: 50%;
          margin-right: 10px;
          color: white;
          text-align: center;
          background: $--color-primary;
        }
        .name{
          flex: 1;
        }
      }
      
    }
    .devide{
      flex: 0 0 10%;
      width: 10%;
      height:1px;
      border-top: 1px solid #cccccc;
      margin: 0 10px;
    }
  }
}
</style>

<script>
// import XdhInfoBox from '@/widgets/xdh-info-box'
export default {
  name: 'caseState',
  components: {
  },
  props: {
  },
  data() {
    return {
      items: []
    }
  },
  watch: {
    
  },
  methods: {
    
  },
  mounted() {
  }
}
</script>

